<template>
    <view class="wai">
        <view class="list-top">
            <view class="list1">
                <view>商品名称</view>
                <input v-model="getGood.title" class="input" type="text" placeholder="请输入商品名称" />
            </view>
            <view class="list1">
                <view>价格（元）</view>
                <input v-model="getGood.price" class="input" type="text" placeholder="请输入现价" />
            </view>
            <view class="list1">
                <view>库存数量</view>
                <input v-model="getGood.stock" class="input" type="text" placeholder="请输入库存数量" />
            </view>
            <view class="list2">
                <uni-section title="是否可清除已选项" type="line">
                    <uni-data-select placeholder="分类" v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
                </uni-section>
            </view>
        </view>
        <view class="cen-sp">
            <view>上传商品主图（一张）</view>
            <view class="flex" @click="addImg">
                <image v-if="getGood.image" class="image" :src="getGood.image" mode=""></image>
                <image v-else class="image" src="@/static/upload.png" mode=""></image>
            </view>
        </view>
        <view class="cen-sp">
            <view>填写商品详情（多张）</view>
            <textarea v-model="getGood.subtitle" class="textarea" cols="30" rows="10" placeholder="请输入详细信息"></textarea>
            <view v-if="getGood?.images?.length <= 0" class="flex" @click="addsImg">
                <image class="image" src="@/static/upload.png" mode=""></image>
            </view>
            <view v-else class="flex" @click="addsImg">
                <image v-for="(it, index) in getGood.images" :key="index" class="image" :src="it" mode=""></image>
            </view>
        </view>
        <view class="topjia">
            <view>是否立即上架</view>
            <wd-switch @change="change1" v-model="checked" active-color="#FF9B29" size="25" />
        </view>
        <view class="topjia">
            <view>自提</view>
            <wd-switch v-model="ziti" active-color="#FF9B29" size="25" />
        </view>
        <view class="btn" @click="btnClick">确定</view>
    </view>
</template>

<script setup>
import { goodsCategory, addGoods } from '@/api/index.js';
import { uploadFile, uploadFiles } from '@/utils/request.js';
import { utils } from '@/utils/utils.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
const ziti = ref(true); //自提
const getImg = ref(''); //主图
const range = ref([]); //分类列表
const checked = ref(true); //是否上架
const linshiId = ref(1); //临时id
const fullurls = ref([]); //详情图显示的路径
const getGood = ref({}); //回显页面的数据
const parmGood = ref({
    id: '', //id
    title: '', //标题
    subtitle: '', //副标题
    image: '', //主图
    images: [], //详情图
    category_ids: '', //分类
    price: '', //价格
    stock: '', //库存
    status: '', //上下价
    weigh: 0, //？
    is_sku: '' //有没有规格
}); //编辑商品传的参数
onLoad((options) => {
    const queryStringData = JSON.parse(decodeURIComponent(options.parm));
    getGood.value = queryStringData;
    //判断是否上架
    if (getGood.value.status == 'up') {
        checked.value = true;
        parmGood.value.status = 'up';
    } else {
        checked.value = false;
        parmGood.value.status = 'down';
    }
    // 上传的参数
    parmGood.value.title = getGood.value.title;
    parmGood.value.subtitle = getGood.value.subtitle;
    parmGood.value.image = getGood.value.image;
    parmGood.value.images = getGood.value.images;
    parmGood.value.price = getGood.value.price;
    parmGood.value.stock = getGood.value.stock;
    parmGood.value.category_ids = getGood.value.category_ids;
    getGoodList(); //获取分类
});
//上传主图
const addImg = async () => {
    const ret = await uploadFile();
    getGood.value.image = ret.data.fullurl; //显示的图片路径
    parmGood.value.image = ret.data.url; //参数的图片路径
};
// 上传详情图
const addsImg = async () => {
    const ret = await uploadFiles();
    // 分离 fullurl（显示的路径） 和 url （参数的路径）
    getGood.value.images = ret.map((item) => item.fullurl); //显示的图片路径
    parmGood.value.images = ret.map((item) => item.url); //参数的图片路径
};

// 确认
const btnClick = async () => {
    parmGood.value.id = getGood.value.id;
    parmGood.value.weigh = getGood.value.weigh;
    // parmGood.value.is_sku = getGood.value.is_sku;
    console.log(777, parmGood.value);
    const ret = await addGoods(JSON.stringify(parmGood.value));
    if (ret.code == 1) {
        uni.navigateBack({
            delta: 2 // 可选参数，表示要返回的页面数，默认为 1
        });
        utils('添加成功');
    } else {
        utils(ret.msg);
    }
};
// 获取商品分类
const getGoodList = async () => {
    const ret = await goodsCategory();
    console.log(ret.data);
    if (ret.code == 1) {
        range.value = ret.data.map((item) => ({
            ...item,
            text: item.name, // 将 name 的值赋给新的 text 属性
            value: item.id
        }));
    } else {
        utils();
    }
};
//点击开关是否上架
const change1 = ({ value }) => {
    if (value) {
        parmGood.value.status = 'up';
    } else {
        parmGood.value.status = 'down';
    }
};
//选中分类的值
const change = (e) => {
    parmGood.value.category_ids = e;
};
</script>

<style lang="scss" scoped>
.guige {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background-color: pink;
    padding: 30rpx;
    height: 80rpx;
    margin: 20rpx 0;
    border: solid #dadada 2rpx;
    border-radius: 12rpx;
    .inp {
        flex: 1;
    }
    .addvw {
        padding: 15rpx;
    }
}
.wai {
    .btn {
        color: #ffffff;
        background: #ff9b29;
        border-radius: 50rpx;
        width: 702rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        margin-left: 24rpx;
        margin-top: 50rpx;
    }
    // 是否自动上架
    .topjia {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 120rpx;
        background-color: #fff;
        margin: 20rpx 0;
        padding: 0 24rpx;
    }
    // 上传主图
    .cen-sp {
        .textarea {
            background-color: #f0f0f0;
            height: 160rpx;
            width: 650rpx;
            padding: 24rpx;
            border-radius: 15rpx;
            margin-top: 18rpx;
        }
        .flex {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .image {
                width: 220rpx;
                height: 220rpx;
                margin-top: 18rpx;
                margin-right: 20rpx;
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }
        padding: 34rpx 24rpx 32rpx;
        background-color: #fff;
        margin-top: 20rpx;
    }
    // 顶部信息
    .list-top {
        .list2 {
            padding: 24rpx 0;
            height: 120rpx;
        }
        .list1 {
            .input {
                text-align: end;
            }
            border-bottom: solid #f5f5f5 2rpx;
            height: 104rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        background-color: #fff;
        padding: 0 24rpx;
    }
    min-height: 100vh;
    background-color: #f7f7f7;
    padding-bottom: 80rpx;
}
</style>
